<!-- 侧边栏图片层 -->
<template>
  <div class="aside-template font-container">
    <div class="title">文字</div>
    <div class="button">
      <el-button @click="onAddFont">添加文字</el-button>
    </div>
    <div class="list">
      <div class="expect">
        <span>文字模板, 敬请期待</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { STORE_NAMESPACE } from '../../../../config/constants'
import { typeConstants } from '../../../../config'
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'AsideFont',
  computed: {
    ...mapState({
      layouts: state => state[STORE_NAMESPACE].layouts,
      current: state => state[STORE_NAMESPACE].current
    })
  },
  methods: {
    async onAddFont () {
      const current = this.current
      const width = 420
      const height = 95
      let x = (this.layouts.width - width) / 2
      let y = (this.layouts.height - height) / 2
      if (current) { // 设置偏移量, 偏移当前layer右下各20像素
        x = (this.current.x || 0) + 20
        y = (this.current.y || 0) + 20
      }
      const layer = {
        id: uuidv4(),
        type: typeConstants.FONT, // 内容类型标识
        content: '<p class="ql-align-center"><span style="color: rgba(0, 0, 0);font-size: 50px">双击编辑文字</span></p>', // 具体内容
        style: { // 样式
          'font-family': 'SourceHanSansCN-03',
          'letter-spacing': 0,
          'line-height': 1.4
        },
        zIndex: 1,
        draggable: true, // 是否允许拖动
        lock: false, // 是否上锁
        opacity: 1, // 透明度
        rotate: 0, // 旋转角度
        width, // 内容宽度
        height, // 内容高度
        x, // 左偏移量
        y // 上偏移量
      }
      if (current) {
        // 停用之前选中的图层
        this.$bus.emit('bus-design-element-event', {
          id: current.id,
          callback: ref => {
            ref.deselect()
          }
        })
      }
      const { length } = await this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        type: 'push',
        value: layer
      })
      // 调整图层的顺序, 新增的图层为当前
      await this.$store.dispatch(`${STORE_NAMESPACE}/setCurrentIndex`, length - 1)
      await this.$store.dispatch(`${STORE_NAMESPACE}/setCurrent`, layer)
      // 激活新增图层
      // todo
    }
  }
}
</script>

<style lang="less" scoped>
.font-container {
  .button {
    .el-button {
      display: block;
      width: 100%;
    }
  }
}
</style>